import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

main() => runApp(MyApp());

// 生成代码快捷键  stl
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GLHomePage(),
    );
  }
}

class GLHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("基础的widget"),
        ),
        body: const GLHomeContent());
  }
}

class GLHomeContent extends StatefulWidget {
  const GLHomeContent({super.key});

  @override
  State<GLHomeContent> createState() => _GLHomeContentState();
}

class _GLHomeContentState extends State<GLHomeContent> {
  @override
  Widget build(BuildContext context) {
    // Row/Column 继承flex
    // Flex: CSS Flex 布局，直接使用的较少
    // Axis.vertical:Column
    // Axis.horizontal:Row
    /*
    * mainAxisAlignment
    * start:主轴开始位置
    * end:结束位置
    * center:中心点
    * spaceBetween:左右两边的间距为0，其他元素之间平分间距
    * spaceAround:左右两边的间距是其他元素之间距离的一半
    * spaceEvenly:所有的间距平分空间
    * */
    /*
    * crossAxisAlignment:交叉轴
    * start: 交叉轴起始位置对齐
    * end:结束位置对齐
    * center:中心点对齐（默认值）
    * baseline:基线对齐(必须有文本的时候才起作用，文本使用)
    * stretch:先让Row占据交叉轴尽可能大的空间，将所有子widget交叉轴拉伸到最大（最大空间）
    *
    * */
    return Column(
      // 垂直对齐
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      textBaseline: TextBaseline.ideographic, // 很少做垂直方向基线对齐
      verticalDirection: VerticalDirection.down,
      children: [
        Container(
            width: 80,
            height: 100,
            color: Colors.red,
            child: Text(
              "Fluter",
              style: TextStyle(fontSize: 20),
            )),
        Container(
            width: 120,
            height: 120,
            color: Colors.pink,
            child: Text("React", style: TextStyle(fontSize: 20))),
        Container(
            width: 90,
            height: 140,
            color: Colors.blue,
            child: Text("Java", style: TextStyle(fontSize: 30))),
        Container(
            width: 50,
            height: 160,
            color: Colors.orange,
            child: Text("Dart", style: TextStyle(fontSize: 20)))
      ],
    );
  }
}
